<template>
  <div class="zsearchtop">
    <div class="topcenter clearfix">
      <router-link to="/search" tag="span">
        <img src="../images/icon_sousuo-search.png" height="40" width="40" alt="">
      </router-link>
      <input type="search" name="" value="" placeholder="请输入要搜索的内容"class="inp">
      <router-link to="/searchpage" >
        <button class="btn">搜索</button>
      </router-link>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'zsearchtop',
    data() {
      return {

      }
    }
  }

</script>

<style lang="less" scoped>
  .zsearchtop{
    height: 88/75rem;
    background-color: #ff406f;
    font-family: "苹方常规";
    font-size: 36/75rem;
    color: #fff;
    line-height: 88/75rem;
    text-align: center;
  }
  .zsearchtop .topcenter{
    margin: 0 20/75rem;
  }
  .zsearchtop span{
    float: left;
    display: block;
    background-color: #fff;
    height:65/75rem;
    margin:10/75rem 0;
    border-top-left-radius:10/75rem;
    border-bottom-left-radius:10/75rem;
  }
  .zsearchtop span img{
    display: block;
    margin:10/75rem 0;
    padding-left: 4/75rem;
  }
  .zsearchtop .btn,.inp{
    display: block;
    height:65/75rem;
    padding:none;
    border:none;
    float: right;
    margin:10/75rem 0;
    font-size: 28/75rem;
    color:#ff406f;
    background-color: #fff;

  }
  .zsearchtop .btn{
    width: 92/75rem;
    border-radius: 10/75rem;
  }
  .zsearchtop .inp{
    border-top-right-radius:10/75rem;
    border-bottom-right-radius:10/75rem;
    float: left;
    width: 538/75rem;
    padding-left: 15/75rem;
  }
</style>
